<template>
	<view class="orderPage">
		<view>
			<view class="center flex  flex-2">
				<view
					style="cursor: pointer;margin: 10px 10px;;width:100px;text-align:center;padding: 15px 20px;border:1px solid #C8C8C8;border-radius: 5px;"
					class="center-wrap" v-for="(item,index) in tab" @click="choce(item,index)"
					:style="{backgroundColor:index == tabindex ? '#42B5FF': '',color:index == tabindex ? '#fff': ''}">
					<view class="navItem" :class="index == tabindex ? 'bottom-line':''">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view v-show="tabindex == 0">
			<view class="flex center" style="align-items: center;">
				<view>
					客户订单号：
				</view>
				<el-input style="width: 30%;" v-model="handOrderNum" placeholder="请输入客户订单号搜索"
					@blur="getTableData2()"></el-input>
			</view>
			<view class="top">
				<view class="top-btn" v-for="(item, index) in topData" @click="handleClick(item.userId)" :key="index"
					:class="userId==item.userId ? 'active' : ''">
					<text>{{item.nickName}}&nbsp;&nbsp;{{item.productionTime}}分钟</text>
				</view>
			</view>
			<view class="bottom">
				<view style="margin-bottom: 10px;" v-if="userId == topData[0].userId">
					<button :loading="btnLoading" :disabled="btnLoading" class="uni-button" size="mini"
						style="background-color: #42B5FF;color:#fff;" type="primary" @click="handleFinish">
						完成成产
					</button>
				</view>
				<uni-table :loading="loading" ref="tableRef1" type="selection" @selection-change="selectionChange"
					style="width: 100% !important;height: 70vh;overflow: auto;" :stripe="false" border emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<!-- <uni-th width="80rpx" class="tab-header" align="center">订单号</uni-th> -->
						<uni-th width="50rpx" class="tab-header" align="center">序号</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">客户订单号</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">子订单号</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">颜色标识</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">产品图片</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">备注</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">尺寸</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">详情</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">交期天数</uni-th>
						<!-- <uni-th width="40rpx" class="tab-header" align="center">后背款式</uni-th> -->
						<uni-th width="70rpx" class="tab-header" align="center">工艺说明</uni-th>
						<uni-th width="70rpx" class="tab-header" align="center">工序名称</uni-th>
						<uni-th width="80rpx" class="tab-header" align="center">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<!-- 订单号 -->
						<!-- <uni-td class="tab-data" align="center">{{item.sonOrderNum}}</uni-td> -->
						<!-- 排序 -->
						<uni-td class="tab-data" align="center">{{(page.page-1)*page.limit + index+1}}</uni-td>
						<!-- 客户订单号 -->
						<uni-td class="tab-data" align="center">{{item.handOrderNum}}</uni-td>
						<!-- 子订单号 -->
						<uni-td class="tab-data" align="center">{{item.sonOrderNum}}</uni-td>
						<!-- 颜色标识 -->
						<uni-td class="tab-data" align="center">
							<image v-for="(item1,index1) in item.colorImage.split(',')" v-show="index1==0"
								@tap.stop="previewImage(index1, item.colorImage.split(','))" :src="item1" mode="">
							</image>
						</uni-td>
						<!-- 产品图片 -->
						<uni-td class="tab-data" align="center">
							<image v-for="(item1,index1) in item.skirtGoodsImage.split(',')" v-show="index1==0"
								@tap.stop="previewImage(index1, item.skirtGoodsImage.split(','))" :src="item1" mode="">
							</image>
						</uni-td>
						<!-- 备注  待完成 -->
						<uni-td class="tab-data" align="center">
							<el-tooltip :open-delay="300" style="cursor: default;" class="item" effect="light" :content="item.remark"
								placement="top-start">
								<span class="aaa">{{item.remark}}</span>
							</el-tooltip>
						</uni-td>
						<!-- 尺寸 -->
						<uni-td class="tab-data" align="center">
							<view style="margin-bottom: 4rpx;">{{item.skirtGoodsSizeName}}</view>
							<view style="color:darkred;">
								{{item.backStyle==1?'拉链':item.backStyle==2?'绑带':item.backStyle==3?'半绑半拉':''}}
							</view>
						</uni-td>
						<!-- 详情 -->
						<uni-td class="tab-data" align="center">
							<el-tooltip :open-delay="300" style="cursor: default;" class="item" effect="light" :content="item.detail"
								placement="top-start">
								<span class="aaa">{{item.detail}}</span>
							</el-tooltip>
						</uni-td>
						<!-- 交期天数 -->
						<uni-td class="tab-data" align="center">
							<!-- <image v-for="(item1,index1) in item.sutureImage.split(',')" v-show="index1==0"
								@tap.stop="previewImage(index1, item.sutureImage.split(','))" :src="item1" mode=""></image> -->
							<view style="display: flex;flex-direction: column; justify-content: flex-start;align-items: center;">
								<view :style="{
											'color': item.dayNum>=0 ?'#2d7cee':'#e64340',
											'font-weight': item.dayNum>=0 ? '500' : 'bold',
											'font-size': item.dayNum>=0 ? '24rpx' : '32rpx'
										}">{{ item.dayNum }}</view>
								<view v-if="item.isUrgent==1" style="font-weight: bold; color: #e64340;margin-top: 10rpx;">急
								</view>
							</view>
						</uni-td>
						<!-- 拍花图片 待完成 -->
						<!-- <uni-td align="center">8</uni-td> -->
						<!-- 后背款式 -->
						<!-- <uni-td class="tab-data" align="center">
								{{item.backStyle==1?'拉链':item.backStyle==2?'绑带':item.backStyle==3?'半绑半拉':''}}
							</uni-td> -->
						<!-- 工艺说明 -->
						<uni-td class="tab-data" align="center">
							<el-tooltip :open-delay="300" style="cursor: default;" class="item" effect="light"
								:content="item.craftExplain" placement="top-start">
								<span class="aaa">{{item.craftExplain}}</span>
							</el-tooltip>
						</uni-td>
						<!-- 工序名称 -->
						<uni-td class="tab-data" align="center">
							<view style="margin-bottom: 4rpx;">{{item.processName}}</view>
							<view style="color: red;margin-bottom: 4rpx;">{{item.describes}}</view>
							<view style="color:#42B5FF;font-weight: bold; cursor: pointer;" @click="()=>{openDetail(item)}">
								原料详情</view>
						</uni-td>
						<!-- 操作按钮 -->
						<uni-td align="left">
							<uni-icons style="cursor: pointer;" @click="handleCanel(item)" type="closeempty"
								size="30"></uni-icons><br />
							<button v-if="item.status==5" class="uni-button" size="mini"
								style="background-color: #fc6d18;color:#fff;margin-left: 5px;" type="primary"
								@click="()=>{cancelShow = true; record = item}">
								取消中
							</button>
						</uni-td>
					</uni-tr>
				</uni-table>
				<!-- 分页器 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange2" :current-page="page.page"
					:page-sizes="[10, 20, 30, 40]" :page-size="page.limit" :background="true" layout="total, sizes, pager, jumper"
					:total="total"
					style="font-size: 30rpx !important; text-align:right; margin: 10rpx 0;user-select: none !important;">
				</el-pagination>
			</view>
		</view>
		<view v-show="tabindex == 1">
			<view class="flex">
				<view class="flex center" style="align-items: center;margin: 10px; width: 25%;">
					<view style="width: 140px">
						客户订单号：
					</view>
					<el-input v-model="handOrderNum" placeholder="请输入客户订单号搜索" @blur="getTableData1()"></el-input>
				</view>
				<view class="flex center" style="align-items: center;margin: 10px;width: 25%;">
					<view style="width: 140px">
						工序名称：
					</view>
					<el-input v-model="processName" placeholder="请输入工序名称搜索" @blur="getTableData1()"></el-input>
				</view>
			</view>
			<view class="bottom">
				<view style="margin: 10px 0px;">
					<button :loading="btnLoading" :disabled="btnLoading" class="uni-button" size="mini"
						style="background-color: #42B5FF;color:#fff;" type="primary" @click="handleFinish">
						完成成产
					</button>
				</view>
				<uni-table :loading="loading" ref="tableRef2" type="selection" @selection-change="selectionChange"
					style="width: 100% !important;height: 70vh;overflow: auto;" :stripe="false" border emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<!-- <uni-th width="80rpx" class="tab-header" align="center">订单号</uni-th> -->
						<uni-th width="50rpx" class="tab-header" align="center">序号</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">客户订单号</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">子订单号</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">颜色标识</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">产品图片</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">备注</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">尺寸</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">详情</uni-th>
						<uni-th width="60rpx" class="tab-header" align="center">交期天数</uni-th>
						<!-- <uni-th width="40rpx" class="tab-header" align="center">后背款式</uni-th> -->
						<uni-th width="70rpx" class="tab-header" align="center">工艺说明</uni-th>
						<uni-th width="70rpx" class="tab-header" align="center">工序名称</uni-th>
						<uni-th width="70rpx" class="tab-header" align="center">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData" :key="item.id">
						<!-- 订单号 -->
						<!-- <uni-td class="tab-data" align="center">{{item.sonOrderNum}}</uni-td> -->
						<!-- 排序 -->
						<uni-td class="tab-data" align="center">{{(page.page-1)*page.limit + index+1}}</uni-td>
						<!-- 客户订单号 -->
						<uni-td class="tab-data" align="center">{{item.handOrderNum}}</uni-td>
						<!-- 子订单号 -->
						<uni-td class="tab-data" align="center">{{item.sonOrderNum}}</uni-td>
						<!-- 颜色标识 -->
						<uni-td class="tab-data" align="center">
							<image v-for="(item1,index1) in item.colorImage.split(',')" v-show="index1==0"
								@tap.stop="previewImage(index1, item.colorImage.split(','))" :src="item1" mode="">
							</image>
						</uni-td>
						<!-- 产品图片 -->
						<uni-td class="tab-data" align="center">
							<image v-for="(item1,index1) in item.skirtGoodsImage.split(',')" v-show="index1==0"
								@tap.stop="previewImage(index1, item.skirtGoodsImage.split(','))" :src="item1" mode="">
							</image>
						</uni-td>
						<!-- 备注  待完成 -->
						<uni-td class="tab-data" align="center">
							<el-tooltip :open-delay="300" style="cursor: default;" class="item" effect="light" :content="item.remark"
								placement="top-start">
								<span class="aaa">{{item.remark}}</span>
							</el-tooltip>
						</uni-td>
						<!-- 尺寸 -->
						<uni-td class="tab-data" align="center">
							<view style="margin-bottom: 4rpx;">{{item.skirtGoodsSizeName}}</view>
							<view style="color:darkred;">
								{{item.backStyle==1?'拉链':item.backStyle==2?'绑带':item.backStyle==3?'半绑半拉':''}}
							</view>
						</uni-td>
						<!-- 详情 -->
						<uni-td class="tab-data" align="center">
							<el-tooltip :open-delay="300" style="cursor: default;" class="item" effect="light" :content="item.detail"
								placement="top-start">
								<span class="aaa">{{item.detail}}</span>
							</el-tooltip>
						</uni-td>
						<!-- 交期天数 -->
						<uni-td class="tab-data" align="center">
							<!-- <image v-for="(item1,index1) in item.sutureImage.split(',')" v-show="index1==0"
							@tap.stop="previewImage(index1, item.sutureImage.split(','))" :src="item1" mode=""></image> -->
							<view style="display: flex;flex-direction: column; justify-content: flex-start;align-items: center;">
								<view :style="{
										'color': item.dayNum>=0 ?'#2d7cee':'#e64340',
										'font-weight': item.dayNum>=0 ? '500' : 'bold',
										'font-size': item.dayNum>=0 ? '24rpx' : '32rpx'
									}">{{ item.dayNum }}</view>
								<view v-if="item.isUrgent==1" style="font-weight: bold; color: #e64340;margin-top: 10rpx;">急
								</view>
							</view>
						</uni-td>
						<!-- 拍花图片 待完成 -->
						<!-- <uni-td align="center">8</uni-td> -->
						<!-- 后背款式 -->
						<!-- <uni-td class="tab-data" align="center">
							{{item.backStyle==1?'拉链':item.backStyle==2?'绑带':item.backStyle==3?'半绑半拉':''}}
						</uni-td> -->
						<!-- 工艺说明 -->
						<uni-td class="tab-data" align="center">
							<el-tooltip :open-delay="300" style="cursor: default;" class="item" effect="light"
								:content="item.craftExplain" placement="top-start">
								<span class="aaa">{{item.craftExplain}}</span>
							</el-tooltip>
						</uni-td>
						<!-- 工序名称 -->
						<uni-td class="tab-data" align="center">
							<view style="margin-bottom: 4rpx;">{{item.processName}}</view>
							<view style="color: red;margin-bottom: 4rpx;">{{item.describes}}</view>
						</uni-td>
						<uni-td class="tab-data" align="center">
							<button v-if="item.status==5" class="uni-button" size="mini"
								style="background-color: #fc6d18;color:#fff;margin-left: 5px;" type="primary"
								@click="()=>{cancelShow = true; record = item}">
								取消中
							</button>
						</uni-td>
					</uni-tr>
				</uni-table>
				<!-- 分页器 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1" :current-page="page.page"
					:page-sizes="[10, 20, 30, 40]" :page-size="page.limit" :background="true" layout="total, sizes, pager, jumper"
					:total="total"
					style="font-size: 30rpx !important; text-align:right; margin: 10rpx 0;user-select: none !important;">
				</el-pagination>
			</view>
		</view>
		<!-- 确认取消 -->
		<u-modal :show="cancelShow" title="提示" :content="'确认取消吗?'" showConfirmButton showCancelButton confirmText="确认"
			cancelText="取消" @confirm="handleCanceling()" @cancel="cancelShow=false"></u-modal>
		<!-- 详情弹框 -->
		<uni-popup ref="popup" type="center" :animation="false">
			<view style="height:600px; overflow:auto; background-color: #fff; padding:30rpx">
				<uni-table :loading="loading" style="width: 100% !important;" :stripe="false" border emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="50rpx" class="tab-header" align="center">序号</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">原料图片</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">原料名称</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">需要数量</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">单位</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in detailData" :key="index">
						<!-- 排序 -->
						<uni-td class="tab-data" align="center">{{index+1}}</uni-td>
						<!-- 原料图片 -->
						<uni-td class="tab-data" align="center">
							<image v-for="(item1,index1) in item.image.split(',')" v-show="index1==0"
								@tap="previewImage(index1, item.image.split(','))" :src="item1" mode=""></image>
						</uni-td>
						<!-- 原料名称 -->
						<uni-td class="tab-data" align="center">{{item.stockName}}</uni-td>
						<!-- 需要数量 -->
						<uni-td class="tab-data" align="center">{{item.reqNum}}</uni-td>
						<!-- 单位 -->
						<uni-td class="tab-data" align="center">{{item.units}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					page: 1,
					limit: 10
				},
				handOrderNum: "",
				processName: "",
				total: 0,
				tableData: [], //下方的表格数据
				loading: false,
				selectedIndexs: [],
				btnLoading: false,
				tab: [{
						title: "我的工序"
					},
					{
						title: "选工序"
					},
				],
				tabindex: 0,
				topData: [],
				cancelShow: false,
				record: {},
				detailData: [],
			}
		},
		mounted() {
			this.getBtnData(1)
		},
		methods: {
			// 取消中
			handleCanceling() {
				let query = {
					handOrderNum: this.record.handOrderNum
				}
				this.api.canceling(query).then(res => {
					this.cancelShow = false
					uni.$u.toast('取消完成！') //操作成功提示
					if (this.tabindex == 0) {
						this.getBtnData(0);
					} else {
						this.getTableData1();
					}
				})
			},
			//打开详情弹框并获取数据
			openDetail(item) {
				this.record = item
				this.$refs.popup.open('center');
				this.api.detail({
					sonOrderId: this.record.sonOrderId
				}).then((res) => {
					console.log(res);
					this.detailData = res.data.data
				})
			},
			// 头部按钮点击事件
			handleClick(userId) {
				// 防止重复点击
				if (this.userId == userId) {
					return
				}
				this.page.page = 1 //切换顶部按钮之后，把当前页重置为 1
				this.userId = userId
				this.getTableData2(this.userId)
			},
			// 获取头部按钮数据
			getBtnData(status) {
				this.api.orderData({
					type: 2
				}).then((res) => {
					this.topData = res.data.data
					//让userData为获取到的第一个数据，并且随后获取一次表格数据
					if (status) {
						this.userId = this.topData[0].userId
					}
					this.getTableData2(this.userId)
				})
			},
			// 切换tab页
			choce(item, index) {
				if (this.tabindex == index) {
					return;
				} //防止重复发送请求
				if (this.loading == true) {
					return
				}
				this.handOrderNum = "";
				this.$refs.tableRef1.clearSelection();
				this.$refs.tableRef2.clearSelection();
				this.selectedIndexs = [];
				this.tabindex = index
				this.loading = true;
				this.page = {
					page: 1,
					limit: 10
				};
				if (this.tabindex == 0) {
					this.getBtnData(0);
				} else {
					this.getTableData1();
				}
			},
			getTableData2() {
				this.loading = true
				this.api.getFinePrecessList({
					...this.page,
					userId: this.userId,
					type: 2,
					handOrderNum: this.handOrderNum
				}).then((res) => {
					this.tableData = res.data.data;
					this.total = res.data.count;
					this.loading = false
				}).finally(() => {
					this.loading = false
				})
			},
			handleCanel(item) {
				this.api.getReleaseFinePrecess({
					id: item.id
				}).then((res) => {
					this.getBtnData(0) //重新获取顶部按钮数据和表格数据
					// this.$refs.tableRef.clearSelection();
					uni.$u.toast('操作成功') //操作成功提示
				}).finally(() => {})
			},
			handleFinish() {
				if (this.selectedIndexs.length == 0) {
					uni.$u.toast('请先选择数据！'); //操作成功提示
					return
				}
				this.btnLoading = true;
				this.api.accomplishFine({
					ids: this.selectedIndexs.join(",")
				}).then((res) => {
					this.btnLoading = false;
					//重新获取顶部按钮数据和表格数据
					this.$refs.tableRef1.clearSelection();
					this.$refs.tableRef2.clearSelection();
					this.selectedIndexs = [];
					uni.$u.toast('生产完成！') //操作成功提示
					if (this.tabindex == 0) {
						this.getBtnData(0)
						// this.getTableData2()
					} else {
						this.getTableData1()
					}
				}).finally(() => {
					this.btnLoading = false;
				})
			},
			// 图片预览
			previewImage(index, urls) {
				//uniapp图片预览
				uni.previewImage({
					current: index, //所预览当前图片的下标
					urls: urls,
					indicator: 'number'
				})
			},
			selectionChange(e) {
				console.log(e);
				this.selectedIndexs = e.detail.index.filter(index => index >= 0 && index < this.tableData.length)
					.map(index => this.tableData[index].id);
				console.log(this.selectedIndexs);
			},
			// 获取下方表格数据
			getTableData1() {
				this.loading = true
				this.api.getFinePrecessList({
					...this.page,
					type: 1,
					processName: this.processName,
					handOrderNum: this.handOrderNum
				}).then((res) => {
					this.tableData = res.data.data;
					this.total = res.data.count;
					this.loading = false
				}).finally(() => {
					this.loading = false
				})
			},
			// 切换页码
			handleCurrentChange1(val) {
				this.page.page = val;
				this.selectedIndexs = [];
				this.getTableData1()
			},
			handleCurrentChange2(val) {
				this.page.page = val;
				this.selectedIndexs = [];
				this.getTableData2()
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		width: 100%;
	}

	.orderPage {
		width: 97%;
		margin: 0 auto;
	}

	.orderPage .top {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		overflow: scroll;
		margin-top: 10px;

	}

	.orderPage .bottom {
		/* width: 100%; */
		background-color: #f5f5f5;
		overflow: auto;
		margin-top: 40rpx;
	}

	.orderPage .top-btn {
		width: 258rpx;
		height: 50rpx;
		background: #fff;
		border: 4rpx solid #C8C8C8;
		opacity: 1;
		border-radius: 10rpx;
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 50rpx;
		margin-bottom: 20rpx;
		cursor: pointer;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 26rpx;
		color: #333333;
	}

	.orderPage .active {
		background-color: #42B5FF;
		color: #fff;
	}

	.tab-header {
		background: #42B5FF;
		font-size: 27rpx;
		font-weight: 400;
		font-family: Microsoft YaHei;
		line-height: 26rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.orderPage image {
		width: 80rpx;
		height: 80rpx;
	}

	.tab-data {
		font-size: 24rpx;
	}

	.aaa {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
</style>